<template>
  <div class="container" >
<!--    侧边导航栏-------->
    <div class="sidebar" :style="{ display: sidebarControl ? 'none' : 'flex',flex: sidebarControl ? '0 0 0' : '0 0 200px' ,
    'flex-direction': 'column'}" >
      <a href="javascript:void(0)" style="text-decoration: none;"><h3 style="color: #fff;text-align: center;margin-top: 0px;">上利ERP系统</h3></a>
      <el-menu router default-active="/index" :unique-opened="true" @select="handleMenuSelect" style="list-style-type: none;color: #fff;">
        <el-menu-item index="/index"><p style="color: #fff">首页</p></el-menu-item>
        <el-sub-menu index="2">
          <template #title><p style="color: #fff">采购</p></template>
          <el-menu-item index="/purch">
            <span style="color: #fff;position: relative;" >采购开单
            </span></el-menu-item>
          <el-menu-item index="/purch/list">
            <span style="color: #fff;position: relative;" >采购报表
            </span></el-menu-item>
          <el-menu-item index="/purch/out"><span style="color: #fff;position: relative;">采购退货单
          </span></el-menu-item>
          <el-menu-item index="/purch/out/list"><span style="color: #fff;position: relative;">退货报表
          </span></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title><p style="color: #fff">销货</p></template>
          <el-menu-item index="/sale"><span style="color: #fff">销货单
            <el-button index="/sale/list" plain class="statement" size="small" color="#fff" style="margin-left: 52px;">报表</el-button>
          </span></el-menu-item>
          <el-menu-item index="/sale/remain"><span style="color: #fff">销货退货单
            <el-button index="/sale/remain/list" plain class="statement" size="small" color="#fff" >报表</el-button>
          </span></el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title><p style="color: #fff">仓库</p></template>
          <el-menu-item index="/ware"><span style="color: #fff">库存查询</span></el-menu-item>
          <el-menu-item index="/inWareTask"><span style="color: #fff">入库任务</span></el-menu-item>
          <el-menu-item index="/OutWareTask"><span style="color: #fff">出库任务</span></el-menu-item>
<!--          <el-menu-item index="5-1"><span style="color: #fff">库存预警</span></el-menu-item>-->

          <el-menu-item index="/ware/transfer"><span style="color: #fff">调拨单<el-button plain class="statement" size="small" color="#fff" style="margin-left: 53px;">报表</el-button></span></el-menu-item>
          <el-menu-item index="/ware/in"><span style="color: #fff">其他入库单
            <el-button index="/ware/in/list" plain class="statement" size="small" color="#fff" >报表</el-button>
          </span></el-menu-item>
          <el-menu-item index="/ware/out"><span style="color: #fff">其他出库单
            <el-button index="/ware/out/list" plain class="statement" size="small" color="#fff" >报表</el-button>
          </span></el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title><p style="color: #fff">设置</p></template>
          <el-menu-item index="/set/prod"><span style="color: #fff">商品管理</span></el-menu-item>
          <el-menu-item index="/set/ware"><span style="color: #fff">仓库管理</span></el-menu-item>
<!--          <el-menu-item index="5-3"><span style="color: #fff">资金管理</span></el-menu-item>-->
          <el-menu-item index="/set/supp"><span style="color: #fff">供应商管理</span></el-menu-item>
          <el-menu-item index="/set/cust"><span style="color: #fff">客户管理</span></el-menu-item>
          <el-menu-item index="/set/category"><span style="color: #fff">品类管理</span></el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <div class="main" :style="{ width: containerWidth }">
      <!--    头部导航栏---------------------------------------->
      <div class="head" style="position: relative;">

            <!-- 切换按钮 -->
            <el-button  type="text" @click="toggleSideControl" >
              <el-icon @click="toggleSideControl"><Fold style="color: grey;font-size: 170px;" @click="toggleSideControl" /></el-icon>
            </el-button>

        <!--          登录下拉框-->
        <div style="margin-left: auto;margin-top: 5px;">
          <el-dropdown style="margin-right: auto">
          <span class="el-dropdown-link">
             管理员
            <el-icon class="el-icon--right" size="10px">
          <arrow-down />
         </el-icon>
          </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item style="width: 70px; overflow: hidden;"><img src="/imgs/img.png" style="height: 70px;width: auto;"/></el-dropdown-item>
                <el-dropdown-item style="margin-left: 6px">个人信息</el-dropdown-item>
                <el-dropdown-item style="margin-left: 6px">退出登录</el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="position: absolute;margin-top: 50px;height: 20px;width: 100%">
          <hr style="border-color: rgba(200,200,200,0.3);">
        </div>
      </div>
      <div class="pageTags" ></div>

      <div class="content" >

      <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, onUnmounted, ref} from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'

const containerWidth = computed(() => {
  return sidebarControl.value ? `${screenWidth.value * 0.9}px` : `${screenWidth.value * 0.7}px`;
});
const screenWidth = ref(window.innerWidth);

// 监听窗口宽度变化
const resizeHandler = () => {
  screenWidth.value = window.innerWidth;

};

onMounted(() => {
  window.addEventListener('resize', resizeHandler);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler);
});
const sidebarControl = ref(false);

const handleMenuSelect = () => {

};
// 隐藏导航栏按钮方法
const toggleSideControl = () => {
  sidebarControl.value = !sidebarControl.value;
};

</script>

<style scoped>
.container {
  display: flex;
  height: 100vh; /* 视口高度 */
  min-height: 900px;
}

.sidebar {
  background-color: #20222A; /* 浅灰色背景 */

  margin-left: -8px;
  height: 100vh;
  padding: 20px;
  min-height: 900px;
}
.head{
  width: 100%;
  flex:0 0 auto;
  display: flex;
  justify-content: space-between; align-items: center;
  height: 40px;
  background-color: white;
}
.main {
  flex: 1; /* 占据剩余空间 */
  background-color: rgba(200,200,200,0.15);
}
.content{
  padding: 10px;

}


/*菜单样式*/
.el-menu {
  background-color: transparent !important;
  border-right: none !important;
  --el-menu-bg-color: transparent!important;
}

.el-menu:hover{
  --el-menu-hover-bg-color: coral!important;
}

.el-submenu__title:hover{
  background-color: coral!important;
}

.el-menu-item:hover{
  background-color: coral!important;
}
.el-icon{
  font-size: 30px;
}
/*报表按钮样式*/
.statement{
  position: absolute;
  background-color: transparent!important;
  margin-top: 14px;
  margin-left: 25px;
}
.statement:hover{
  color: black;
}
.example-showcase  {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown-link:focus-visible {
  outline: unset;
}

.pageTags{
  width: 100%;height: 30px;background-color: white;
}
</style>
